<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-button type="primary"
                   size="mini" @click="dialogFormVisibleG =true" style="margin: 20px 0"
        >新增测试用例集
        </el-button
        >
        <div class="el-div">
          <el-dialog :title="title" :visible.sync="dialogFormVisibleG" width="30%">
            <el-form>
              <el-form-item label="测试用例集：" :label-width="formLabelWidth">
                <el-input
                  v-model="groupName"
                  autocomplete="off"
                  placeholder="请输入测试用例集"
                  size="mini"
                ></el-input>
              </el-form-item>
              <el-form-item label="测试用例集备注：" :label-width="formLabelWidth">
                <el-input
                  v-model="remark"
                  autocomplete="off"
                  placeholder="请输入备注"
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisibleG = false" size="mini"
              >取 消
              </el-button
              >
              <el-button
                type="primary"
                @click="
              dialogFormVisibleG = false;
              dj();
            "
                size="mini"
              >确 定
              </el-button
              >
            </div>
          </el-dialog>
        </div>

        <el-card>
          <div slot="header">
            <el-row :gutter="10">
              <el-col :span="20"
              >
                <el-input
                  size="mini"
                  placeholder="请输出搜索名称"
                  v-model="search"
                ></el-input
                >
              </el-col>
              <el-col :span="4"
              >
                <el-button size="mini" style="float: right"
                >搜索
                </el-button
                >
              </el-col
              >
            </el-row>
          </div>
          <div>
            <el-table
              :data="groupList"
              :show-header="false"
              size="mini"
              @row-click="rowClick"
            >
              <el-table-column prop="name"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16" v-show="caseShow">
        <el-button
          type="primary"
          size="mini"
          @click="addTestCase()"
          style="margin: 20px 0"
        >新增测试用例
        </el-button
        >
        <el-card style="height: 100%">
          <div>
            <el-table :data="testCaseList" :border="true" size="mini">
              <el-table-column
                prop="testCaseName"
                label="用例名称"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="remark" label="用例描述" align="center">
              </el-table-column>
              <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                  <div>
                    <el-popover
                      placement="top"
                      width="160"
                      v-model="scope.row.visible"
                      :ref="`node-popover-${scope.$index}`"
                    >
                      <p>确定删除？</p>
                      <div style="text-align: right; margin: 0">
                        <el-button
                          size="mini"
                          type="text"
                          @click="scope.row.visible = false"
                        >取消
                        </el-button
                        >
                        <el-button
                          type="primary"
                          size="mini"
                          @click="
                          handleDelete(scope.$index, scope.row);
                        "
                        >确定
                        </el-button
                        >
                      </div>
                      <el-button size="mini" type="danger" slot="reference" @click="test(scope)"
                      >删除
                      </el-button
                      >
                    </el-popover>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <add-test-case-page
              :dialogFormVisible.sync="dialogFormVisible"
              :groupId.sync="groupIdByNow"
              v-on:changeAddTestCasePage="off()"
            ></add-test-case-page>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import index from './index'
  export default index
</script>
